<template>
	<view class="content">
		<view class="baoxiao-tab">
			<view class="tab-li" :class="user_status === item.user_status ?'active':''" v-for="(item,index) in tabList"
				:key="index" @click="orderTab(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-li" 
				v-for="(item,index) in orderList" :key="index">
				<view class="order-li-top">
					
					<text>提交时间：{{ item.createtime }}</text>
					<text class="type" >{{item.wx_status_name}}</text>
				</view>
				<view class="order-cen">
					<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 10rpx;color: #333;">
						报修类目：{{item.classification_name}}
					</view>
					<view>维修地点：{{item.report}}</view>
				</view>
				<view class="order-bot">
				
					<view class="btn1" @click="jump1('/pages/material/order/order_xq?id='+item.id+'&index='+index + '&wx_status_name=' + item.wx_status_name)">
						<text>查看详情</text>
					</view>
					<view class="btn2" v-if="item.wx_status == 1" @click="open(item.id,0,index)">
						<text>去审核</text>
					</view>
					
				</view>
			</view>
		</view>

		<view class="" v-else style="margin-top: 15vh;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-modal v-model="tuidan" :title="title" :content='content' :mask-close-able="true" show-cancel-button
			@cancel="order_qx" @confirm="order_confirm">
			<view >
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :value="item.id"
						:name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="sctp">
				上传图片：
			</view>
			<view class="" style="margin-left: 20rpx; margin-right: 20rpx">
				<u-upload ref="uUpload" :action="action" max-count="3"  
				width=150rpx height=150rpx 
				show-progress=false @on-success="success" @on-remove="onRemove"
				>
				<u-icon name="photo-fill"></u-icon>
				
				</u-upload>
			</view>
			<view v-if="from.check_status == 1" class="" style="margin-top: 43rpx;
				margin-left: 20rpx; margin-right: 20rpx ;font-size: 28rpx;font-weight: 400;color: #333333;
				">
				驳回理由:
			</view>
			<view v-if="from.check_status == 1" style="margin-top: 24rpx;
				margin-left: 20rpx; margin-right: 20rpx; padding: 30rpx;
				border: 3rpx solid #dadada;border-radius: 10rpx;">
				<textarea v-model="from.check_fail_message" placeholder="请填写审核不通过的理由"></textarea>
			</view>		
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: this.$IMG_URL + '/index/ajax/upload',
				fileList: [
					
				],
				fileLists:[],
				user_status: -1,
				pages: 1,
				last_page: 2,
				list: [{
						id: 1,
						name: '审核通过',
						disabled: false
					},
					{
						id: 2,
						name: '审核不通过',
						disabled: false
					},
				],
				tabList: [{
						type: '',
						name: '全部',
						user_status: -1
					},
					{
						type: '',
						name: '待审核',
						user_status: 0
					},
					{
						type: '',
						name: '审核通过',
						user_status: 2
					},
					{
						type: '',
						name: '审核不通过',
						user_status: 1
					}
				],
				value:"审核通过",
				orderList: [],
				show: false,
				content: '',
				title:'',				
				orderid:'',
				confirmtext:'确认',
				index:'',
				tuidan:false,
				tuidan_id:'',
				tuidan_message:'',
				from: {
					id: '',
					check_status: 2,
					check_fail_message: '',
					material_images:''
				},
			}
		},
		onShow() {
			this.getOrderList()
			let that = this
			uni.$on('weixiu', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onLoad(e) {
			this.getOrderList()
			let that = this
			uni.$on('weixiu', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onPullDownRefresh() {
			this.pages = 1
			this.orderList = []
			this.getOrderList()
		},
		onReachBottom() {
			if (this.last_page > this.pages) {
				this.pages++
				this.orderList = []
				this.getOrderList()
			}
		},
		methods: {
			success(e){
				console.log(this.fileList)
				let _this=this
				_this.from.material_images=''
				var a = {url:e.data.fullurl}
				this.fileLists.push(a)
				this.fileLists.forEach((item,index)=>{
					if(index+1 ==this.fileLists.length){
						console.log(index)
						_this.from.material_images+= item.url
					}else{
						_this.from.material_images+= item.url+','
					}
				})			
			},
			onRemove(e){
				let _this=this
				this.fileLists.splice(e)
				_this.from.material_images=''
				this.fileLists.forEach((item,index)=>{
					if(index+1 ==this.fileLists.length){
						_this.from.material_images+= item.url
					}else{
						_this.from.material_images+= item.url+','
					}
				})
				
			},
			order_confirm(){
				this.$u.post('material/order_confirm',this.from).
				then(res =>{
					uni.showToast({
						icon:'success',
						title:res.msg
					})
					this.getOrderList()
				}).catch(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					this.getOrderList()
					
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				//console.log(e);
				if (e == '审核通过') {
					this.from.check_status = 2
				} else {
					this.from.check_status = 1
				}
			},
			radioGroupChange(e) {
				console.log(e);
				if (e == 0) {

				} else {

				}
			},
			opentuidan(e){
				this.tuidan = true
				this.tuidan_id = e
				
			},
			qdtuidan(){
				if(this.tuidan_message == ''){
					uni.showToast({
						icon:'none',
						title:'请输入退单原因'
					})
					return
				}
				let data = {
					id:this.tuidan_id,
					message:this.tuidan_message
				}
				this.$u.post('service/refund_order',data).
				then(res =>{
					uni.showToast({
						icon:'success',
						title:'提交成功'
					})
					this.tuidan_id = '',
					this.tuidan_message = ''
					this.getOrderList()
					//console.log(res)
				}).catch(res=>{
					//console.log(res)
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
				})
			},
			qxdingdan(){
				
				this.tuidan = false
				this.tuidan_id = ''
				this.tuidan_message = ''
			},	
			open(e,q,i){
				
				//console.log(e,q,i)
				this.title = "订单审核";	
				this.$refs.uUpload.lists=[]
				this.from.id = e
				this.from.check_fail_message=''
				this.fileList=[]
				this.fileLists=[]
				this.from.material_images=''
				console.log(this.from)
				// if(q == 0){
				// 	this.orderid = e;
				// 	this.content =  `
				// 						<p style="text-align:center;line-height: 30px;">接单成功后，需要在<br>
				// 						规定时间内完成维修,确定接单吗?</p>
				// 					`;
				// 	this.index = i
				// 	console.log(e,q,i,'1')
				// }if(q != 0){
				// 	this.content =  `
				// 						<p style="text-align:center;line-height: 30px;">您已接收到订单<br>
				// 					请在我的维修订单更新进度</p>
				// 					`;
				// 	this.confirmtext = '订单详情'
				// 	this.index = i
				// 	//console.log(e,q,i,'2')
				// }
				this.tuidan = true;
				
				
			},
			confirm(){
				if( this.confirmtext == '确认' ){
					//console.log('提交')
					//this.open(this.orderid,1)
					this.$u.post('/service/order_receive', {
						id:this.orderid
					}).then(res => {
						//console.log(res)
						this.open(this.orderid,1,this.index)
					})
				}else{
					//console.log('查看详情')
					this.jump('/pages/service/order/order-xq?id='+this.orderid+'&index='+this.index)
					this.orderid = ''
					this.index = ''
					this.confirmtext = '确认'
				}
				
				
			},
			cancel(){
				this.orderid = '';
				this.index = '';
				this.confirmtext = '确认'
				this.show = false;
				this.getOrderList()
			},
			// 
			orderTab(item) {
				this.pages = 1
				this.orderList = []
				this.user_status = item.user_status
				this.getOrderList()
			},

			// 获取报修订单
			getOrderList() {

				this.$u.post('/material/list', {
					check_status: this.user_status ,
					page: this.pages,
					size: 20
				}).then(res => {
					//console.log(res)
					this.last_page = res.data.last_page
					this.orderList = res.data.data
				})
			},
			jump1(url1) {
				console.log(url1)
				uni.navigateTo({
					url:url1
				})
			}
		}
	}
</script>

<style lang="less">
	.sctp{
		margin-top: 43rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		padding: 19rpx  20rpx 30rpx;
		border-top: 1rpx  solid #EEEEEE;
	}
	.u-list-item{
		margin-left: 0 !important;
		margin-right: 20rpx !important;
	}
	.u-radio-group{
		display: flex;
		justify-content: space-around;
	}
	.u-model__title{
		padding-top: 25rpx !important;
		padding-bottom: 38rpx !important;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 38rpx;
		font-weight: normal;
		color: #333333;
	}
	.u-radio__label{
		margin-right: 0  !important;
	}
	.u-model__content{
		padding: 50rpx 0 26rpx;
		padding-top: 50rpx;
	}
	.content {
		padding-top: 0;
	}
	.order-cen view{
		font-size: 34rpx !important;
	}
	.baoxiao-tab {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 31rpx;
		height: 80rpx;
		margin: 0 -20rpx;
		margin-top: 5rpx;
		margin-bottom: 10rpx;
	
	}
	.tab-li{
		font-size: 39rpx;
		margin-right: 10rpx;
		white-space: nowrap;
	}
	.tab-li.active {
		font-weight: bold;
		color: #0055B0;
	}
	
	.order-li {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: #fff;
	}
	
	.order-li-top {
		height: 111rpx;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}
	
	.order-cen {
		padding: 40rpx 20rpx;
		border-bottom: 1px solid #F7F7F9;
	
		view {
			color: #7C7C7C;
			font-size: 28rpx;
		}
	}
	
	.order-bot {
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	
		button {
			margin: 0;
		}
	
		padding: 0 20rpx;
	}
	
	.btn1,
	.btn2 {
		width: 150rpx;
		height: 65rpx;
		border: 1px solid #333;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
		font-weight: 500;
		margin-left: 30rpx !important;
	}
	
	.type {
		color: #0055B0;
	}
	
	.btn2 {
		color: #0055B0;
		border: 1px solid #0055B0;
	}
</style>
